<template>
    <div class="zjTable" v-show="isZJ">
        <div class="closeZJ" @click="closeZJ">关闭</div>
        <div class="tableContainer">
            <table
                align="left"
                border="1"
                cellpadding="1"
                cellspacing="0"
                dir="ltr"
            >
                <thead>
                    <tr>
                        <th scope="col">专家名称</th>
                        <th scope="col">专家类型</th>
                        <th scope="col">专家电话</th>
                        <th scope="col">所在地址</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in zhuanjiaList" :key="item.id">
                        <td>{{ item.name }}</td>
                        <td>{{ item.mintype }}</td>
                        <td>{{ item.contactway }}</td>
                        <td>{{ item.unitname }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="rightOne">
        <div class="sjzlRightThree">
            <SjzlTitle
                titles="主题库分类"
                @click="rightRemoveAll"
                ImgSrc="./data/images/sjzl/right5.png"
            />
            <div class="sjzlRightThree__tabs">
                <div
                    v-for="(item, index) in tabsTitle"
                    :key="index"
                    :class="{ tab__active: isTabActive == index }"
                    @click="handleTabClick(index)"
                >
                    {{ item.name }}
                    <b>
                        {{ item.value }}
                    </b>
                </div>
            </div>
            <div class="sjzlRightThree__one">
                <div class="ziyuan">
                    <div
                        class="ziyuan__item"
                        v-for="(item, index) in ziyuanList"
                        :key="index"
                    >
                        <div class="selectItem" v-show="item.childShow">
                            <a
                                v-for="(item1, index1) in item.childItems"
                                :key="index1"
                                :href="item1.href"
                            >
                                <span>{{ item1.name }}</span>
                            </a>
                        </div>
                        <div class="iconExport">
                            <span
                                @click="exportWord(item.exportHref)"
                                v-if="item.isExport"
                            >
                                <img src="/data/images/sjzl/导出.png" alt="" />
                            </span>
                        </div>
                        <div
                            class="parentItem"
                            @click="handleZiYuanClick(item, index)"
                            :class="{ itemActive: isZyActive == index }"
                        >
                            <span :style="{ color: `${item.color}` }">{{
                                item.name
                            }}</span>
                            <span :style="{ color: `${item.color}` }">{{
                                item.value
                            }}</span>
                        </div>
                    </div>
                </div>
                <div class="chartLb">
                    <div class="title">资源分类统计</div>
                    <div id="chartLb"></div>
                </div>
                <div class="chartSx">
                    <div class="title">
                        {{ erjiName }}-{{ sanjiName }}-市县统计
                    </div>
                    <div id="chartSx"></div>
                </div>
            </div>
        </div>
        <div class="sjzlRightTwo">
            <div class="sjzlRightTwo__left">
                <SjzlTitle
                    titles="主题库资源"
                    ImgSrc="./data/images/sjzl/right3.png"
                />
                <div class="sjzlRightTwo__left__content">
                    <div
                        class="sjzlRightTwo__left__content1"
                        @click="handleClick3()"
                    >
                        主题库
                    </div>
                    <div class="sjzlRightTwo__left__content2">
                        <div
                            class="sjzlRightTwo__left__content2__item"
                            v-for="(item, index) in themeBase"
                            :key="index"
                        >
                            <div>{{ item.name }}</div>
                            <div>{{ item.value }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sjzlRightTwo__right">
                <SjzlTitle
                    titles="专题库资源"
                    ImgSrc="./data/images/sjzl/right4.png"
                />
                <div class="sjzlRightTwo__right__content">
                    <div
                        class="sjzlRightTwo__right__content1"
                        @click="handleClick4"
                    >
                        专题库
                    </div>
                    <div class="sjzlRightTwo__right__content2">
                        <div
                            class="sjzlRightTwo__right__content2__item"
                            v-for="(item, index) in sThemeBase"
                            :key="index"
                        >
                            <div>{{ item.name }}</div>
                            <div>{{ item.value }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sjzlRightOne">
            <div class="sjzlRightOne__left">
                <SjzlTitle
                    titles="接口使用情况"
                    ImgSrc="./data/images/sjzl/right1.png"
                />
                <div class="sjzlRightOne__left__content">
                    <div
                        class="sjzlRightOne__left__item"
                        v-for="(item, index) in useList"
                        :key="index"
                        @click="handleClick1(item, index)"
                    >
                        <div>{{ item.name }}</div>
                        <!-- <CountTo :startVal="0" :endVal='item.value' :duration="3000"/> -->
                        <!-- <Digital :orderNum="item.value.split('')"/> -->
                        <div :style="{ color: `${item.color}` }">
                            {{ item.value }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="sjzlRightOne__right">
                <SjzlTitle
                    titles="资源库资源"
                    ImgSrc="./data/images/sjzl/right2.png"
                />
                <div class="sjzlRightOne__right__circles">
                    <div
                        class="sjzlRightOne__right__circle1"
                        @click="handleClick2(0)"
                    >
                        <div>{{ ziyuanKu[0].name }}</div>
                        <div>{{ ziyuanKu[0].value }}</div>
                    </div>
                    <div
                        class="sjzlRightOne__right__circle2"
                        @click="handleClick2(1)"
                    >
                        <div>{{ ziyuanKu[1].name }}</div>
                        <div>{{ ziyuanKu[1].value }}</div>
                    </div>
                    <div
                        class="sjzlRightOne__right__circle3"
                        @click="handleClick2(2)"
                    >
                        <div>{{ ziyuanKu[2].name }}</div>
                        <div>{{ ziyuanKu[2].value }}</div>
                    </div>
                    <div
                        class="sjzlRightOne__right__circle4"
                        @click="handleClick2(3)"
                    >
                        <div>{{ ziyuanKu[3].name }}</div>
                        <div>{{ ziyuanKu[3].value }}</div>
                    </div>
                    <div
                        class="sjzlRightOne__right__circle5"
                        @click="handleClick2(4)"
                    >
                        <div>{{ ziyuanKu[4].name }}</div>
                        <div>{{ ziyuanKu[4].value }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import SjzlTitle from "../SjzlTitle";
import { onMounted, ref, provide, nextTick, onBeforeUnmount, watch } from "vue";
import { get } from "../../../util/request";
import echarts from "echarts";
import { useStore } from "vuex";
import axios from "axios";
import { ElLoading } from "element-plus";
export default {
    components: {
        SjzlTitle,
    },
    setup() {
        const store = useStore();
        //接口使用情况
        let useList = ref([
            { name: "接口可访问性", value: "0/15", color: "#FFF002" },
            { name: "接口交换数据量", value: 151324, color: "#19F1F9" },
            { name: "接口访问次数", value: 65314, color: "#19F1F9" },
            { name: "接口访问用户数", value: 52268, color: "#FFF002" },
        ]);
        //主题库
        let themeBase = ref([
            { name: "接口数", value: "0", color: "#FFF002" },
            { name: "一级分类数", value: "0", color: "#19F1F9" },
            { name: "二级分类数", value: "154", color: "#19F1F9" },
        ]);
        //专题库
        let sThemeBase = ref([
            { name: "接口数", value: "0", color: "#FFF002" },
            { name: "一级分类数", value: "0", color: "#19F1F9" },
            { name: "二级分类数", value: "0", color: "#19F1F9" },
        ]);
        //资源库资源
        let ziyuanKu = ref([
            { name: "数据量", value: "0", color: "#FFF002" },
            { name: "接口数", value: "259", color: "#19F1F9" },
            { name: "资源数", value: "330", color: "#19F1F9" },
            { name: "占用空间", value: "128640", color: "#19F1F9" },
            { name: "库表数", value: "23", color: "#19F1F9" },
        ]);
        let detailArr1 = ref([]);
        let detailArr2 = ref([]);
        let detailArr3 = ref([]);
        let detailArr4 = ref([]);
        let tabsTitle = ref([
            { name: "自然灾害类", value: "" },
            { name: "安全生产类", value: "" },
            { name: "应急救援类", value: "" },
        ]);
        const rightRemoveAll = () => {
            layerManager.removeAll();
            store.commit("changeNameTitle", null);
        };
        let currentTypeUrl = ref("");
        let currentTypesUrl = ref("");
        const getData = (url) => {
            get(url).then((res) => {
                drawLBChart(res.data);
            });
        };
        let closeZJ = () => {
            isZJ.value = false;
        };
        watch(
            () => store.state.sjzlCenterState,
            (newVlaue) => {
                switch (newVlaue) {
                    case "水旱灾害风险区":
                        getData("/api/pandect/risk/waterTypes");
                        currentTypeUrl.value = "/api/pandect/risk/water/";
                        currentTypesUrl.value = "/api/pandect/risk/waters/";
                        break;
                    case "地质灾害风险区":
                        getData("/api/pandect/risk/earthTypes");
                        currentTypeUrl.value = "/api/pandect/risk/earth/";
                        currentTypesUrl.value = "/api/pandect/risk/earths/";
                        break;
                    case "地震灾害风险区":
                        getData("/api/pandect/risk/earthquakeTypes");
                        currentTypeUrl.value = "/api/pandect/risk/earthquake/";
                        currentTypesUrl.value =
                            "/api/pandect/risk/earthquakes/";
                        break;
                    case "森林火灾风险区":
                        getData("/api/pandect/risk/forestTypes");
                        currentTypeUrl.value = "/api/pandect/risk/forest/";
                        currentTypesUrl.value = "/api/pandect/risk/forests/";
                        break;
                    case "安全生产危险源":
                        getData("/api/pandect/safety/produceTypes");
                        currentTypeUrl.value = "/api/pandect/safety/produce/";
                        currentTypesUrl.value = "/api/pandect/safety/produces/";
                        break;
                    case "运输安全危险源":
                        getData("/api/pandect/safety/transportTypes");
                        currentTypeUrl.value = "/api/pandect/safety/transport/";
                        currentTypesUrl.value =
                            "/api/pandect/safety/transports/";
                        break;
                    case "安全生产企业":
                        getData("/api/pandect/safety/productionTypes");
                        currentTypeUrl.value =
                            "/api/pandect/safety/production/";
                        currentTypesUrl.value =
                            "/api/pandect/safety/productions/";
                        break;
                    case "铁路环境安全隐患点":
                        getData("/api/pandect/safety/trafficrailwayTypes");
                        currentTypeUrl.value = "tl";
                        currentTypesUrl.value =
                            "/api/pandect/safety/transports/";
                        break;
                    case "应急物资":
                        yjwz();
                        currentTypeUrl.value = "yjwz";
                        currentTypesUrl.value = "yjwz";
                        break;
                    case "救援力量":
                        //1,消防救援力量(有坐标)。2，森林防火队伍（无坐标）。3，社会救援力量（有坐标）。4，应急管理专家（无坐标）
                        jyll();
                        currentTypeUrl.value = "jyll";
                        currentTypesUrl.value = "jyll";
                        break;
                    case "防护目标":
                        currentTypeUrl.value = "xuexiao";
                        currentTypesUrl.value = "xuexiao";
                        break;
                }
            }
        );
        //救援力量
        const jyll = () => {
            Promise.all([
                get(
                    "/api/aggregation/findFirebrigade?pageSize=65534&startPage=1"
                ),
                get(
                    "/api/aggregation/findForestFireteam?pageSize=65534&startPage=1"
                ),
                get(
                    "/api/aggregation/findSocialOrg?pageSize=65534&startPage=1"
                ),
                get("/api/aggregation/findExpert?pageSize=65534&startPage=1"),
            ]).then((res) => {
                let data = [
                    { name: "消防救援力量", value: res[0].length },
                    { name: "森林防火救队伍", value: res[1].length },
                    { name: "社会救援力量", value: res[2].length },
                    { name: "应急管理专家", value: res[3].length },
                ];
                drawLBChart(data);
            });
        };
        //应急物资
        const yjwz = () => {
            drawLBChart([
                { name: "物资储备点", value: 30 },
                { name: "物资仓库", value: 277 },
            ]);
        };
        //按类类别统计
        const drawLBChart = (dataVal) => {
            var dom = document.getElementById("chartLb");
            var myChart = echarts.init(dom);
            let data1 = [
                {
                    value: 1,
                    name: "rose1",
                    itemStyle: {
                        color: "rgba(38,236,229,0.9)",
                        borderColor: "rgba(38,236,229,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 2,
                    name: "rose2",
                    itemStyle: {
                        color: "rgba(0,152,255,0.9)",
                        borderColor: "rgba(0,152,255,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 3,
                    name: "rose3",
                    itemStyle: {
                        color: "rgba(0,200,83,.7)",
                        borderColor: "rgba(0,200,83,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 4,
                    name: "rose4",
                    itemStyle: {
                        color: "rgba(103,150,215,0.9)",
                        borderColor: "rgba(103,150,215,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 5,
                    name: "rose5",
                    itemStyle: {
                        color: "rgba(238,145,117,0.9)",
                        borderColor: "rgba(238,145,117,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 6,
                    name: "rose5",
                    itemStyle: {
                        color: "rgba(214,86,113,0.9)",
                        borderColor: "rgba(214,86,113,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 7,
                    name: "rose5",
                    itemStyle: {
                        color: "rgba(70,232,156,0.9)",
                        borderColor: "rgba(70,232,156,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 8,
                    name: "rose5",
                    itemStyle: {
                        color: "rgba(38,236,229,0.9)",
                        borderColor: "rgba(38,236,229,1)",
                        borderWidth: 3,
                    },
                },
            ];
            let data = data1.slice(0, dataVal.length);
            dataVal.forEach((item, index) => {
                data[index].name = item.name;
                data[index].value = item.value;
            });
            let dataArr = dataVal.map((item) => {
                return item.name;
            });
            let option = {
                animation: false,
                legend: {
                    orient: "vertical",
                    top: "0%",
                    right: "0%",
                    data: dataArr,
                    itemWidth: 8,
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                    },
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                },
                series: [
                    {
                        name: "占比",
                        type: "pie",
                        radius: ["30%", "70%"],
                        center: ["48%", "50%"],
                        roseType: "radius",
                        label: {
                            show: true,
                            normal: {
                                position: "outside",
                                fontSize: 20,
                            },
                        },
                        labelLine: {
                            length: 1,
                            length2: 10,
                            smooth: true,
                        },
                        data: data,
                        minAngle: 30,
                    },
                ],
            };
            myChart.setOption(option);
            myChart.on("click", pieConsole);
            function pieConsole(param) {
                getSXData(param);
                sanjiName.value = param.name;
            }
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };
        //按市县统计
        function drawSXChart(data) {
            var dom = document.getElementById("chartSx");
            var myChart = echarts.init(dom);
            let xData = data.map((item) => {
                return item.name;
            });
            let yData = data.map((item) => {
                return item.value;
            });
            let option = {
                animation: false,
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                grid: {
                    top: "15%",
                    right: "3%",
                    left: "10%",
                    bottom: "25%",
                },
                xAxis: [
                    {
                        type: "category",
                        data: xData,
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,0.12)",
                            },
                        },
                        axisLabel: {
                            margin: 10,
                            color: "#e2e9ff",
                            rotate: 30,
                            textStyle: {
                                fontSize: 14,
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        name: "单位：个",
                        axisLabel: {
                            formatter: "{value}",
                            color: "#e2e9ff",
                            textStyle: {
                                fontSize: 14,
                            },
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255,255,255,1)",
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255,255,255,0.12)",
                            },
                        },
                    },
                ],
                series: [
                    {
                        type: "bar",
                        data: yData,
                        barWidth: "10px",
                        itemStyle: {
                            normal: {
                                color: "rgba(0,244,255,1)",
                                // new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(0,244,255,1)' // 0% 处的颜色
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(0,77,167,1)' // 100% 处的颜色
                                // }], false),
                                barBorderRadius: [0, 0, 0, 0],
                                shadowColor: "rgba(0,160,221,1)",
                                shadowBlur: 4,
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                lineHeight: 30,
                                width: 80,
                                height: 30,
                                backgroundColor: "rgba(0,160,221,0.1)",
                                borderRadius: 200,
                                position: ["-8", "-60"],
                                distance: 1,
                                formatter: [
                                    "    {d|●}",
                                    " {a|{c}}     \n",
                                    "    {b|}",
                                ].join(","),
                                rich: {
                                    d: {
                                        color: "#3CDDCF",
                                    },
                                    a: {
                                        color: "#fff",
                                        align: "center",
                                    },
                                    b: {
                                        width: 1,
                                        height: 30,
                                        borderWidth: 1,
                                        borderColor: "#234e6c",
                                        align: "left",
                                    },
                                },
                            },
                        },
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        //饼图 点击事件 获取统计市县数据,同时上球
        let isZJ = ref(false);
        let zhuanjiaList = ref([]);
        function getSXData(param) {
            layerManager.removeAll();
            let nameTitle = {
                name: param.name,
                value: param.value,
            };
            if (param.name == "应急管理专家") {
                isZJ.value = true;
                get(
                    "/api/aggregation/findExpert?pageSize=65534&startPage=1"
                ).then((res) => {
                    zhuanjiaList.value = res;
                    //layerManager.addPoint(res, "#FFFF00" , "专家" ,"leftClick", clickHandleWith )
                });
            }
            store.commit("changeNameTitle", nameTitle);
            let name = param.name;
            if (currentTypeUrl.value == "yjwz") {
                //
                //上球
                get(
                    `/api/aggregation/findRbMaterialwarehouse?type=${name}&pageSize=65534&startPage=1`
                ).then((res) => {
                    layerManager.addPrimitivesBillboards(
                        res,
                        `/data/images/icon/${name}.png`,
                        name,
                        "leftClick",
                        clickHandleWith
                    );
                });
                //市县统计
                get(`/api/aggregation/countRbMaterialByArea/${name}`).then(
                    (res) => {
                        drawSXChart(res);
                    }
                );
            } else if (currentTypeUrl.value == "tl") {
                //铁路安全隐患点
                get(
                    `/api/pandect/safety/trafficrailwaysType?pageSize=65534&startPage=1`
                ).then((res) => {
                    layerManager.addPrimitivesBillboards(
                        res.data.contents,
                        `/data/images/icon/${name}.png`,
                        name,
                        "leftClick",
                        clickHandleWithNewPannel
                    );
                });
                //市县统计
                get(`/api/pandect/safety/trafficrailway`).then((res) => {
                    drawSXChart(res.data);
                });
            } else if (currentTypeUrl.value == "jyll") {
                switch (
                    name //1,消防救援力量(有坐标)。2，森林防火救队伍（无坐标）。3，社会救援力量（有坐标）。4，应急管理专家（无坐标）
                ) {
                    case "消防救援力量":
                        get(`/api/aggregation/countFirebrigade`).then((res) => {
                            drawSXChart(res);
                        });
                        get(
                            `/api/aggregation/findFirebrigade?pageSize=65534&startPage=1`
                        ).then((res) => {
                            layerManager.addPrimitivesBillboards(
                                res,
                                `/data/images/icon/${name}.png`,
                                name,
                                "leftClick",
                                clickHandleWith
                            );
                        });
                        break;
                    case "森林防火救队伍":
                        get(`/api/aggregation/countForestFireteam`).then(
                            (res) => {
                                drawSXChart(res);
                            }
                        );
                        // get(`/api/aggregation/findForestFireteam?area=&name=&pageSize=65534&startPage=1`).then((res)=>{
                        //     //layerManager.addPoint(res, "#ffff00" , name ,"leftClick",clickHandle);

                        //     layerManager.addPrimitivesBillboards(res, `/data/images/icon/扑火队伍.png` , name ,"leftClick", clickHandleWith)
                        // })
                        break;
                    case "社会救援力量":
                        get(`/api/aggregation/countSocialOrg`).then((res) => {
                            drawSXChart(res);
                        });
                        get(
                            `/api/aggregation/findSocialOrg?pageSize=65534&startPage=1`
                        ).then((res) => {
                            //layerManager.addPoint(res, "#ffff00" , name ,"leftClick",clickHandle);
                            layerManager.addPrimitivesBillboards(
                                res,
                                `/data/images/icon/${name}.png`,
                                name,
                                "leftClick",
                                clickHandleWith
                            );
                        });
                        break;
                    case "应急管理专家": //没有统计的市县分布，有类别数量
                        // get(`/api/aggregation/findRbMaterialwarehouse?pageSize=65534&startPage=1`).then((res)=>{
                        let data = [
                            // "naturalDisasterNum": 48,
                            // "informationNum": 33,
                            // "publicHealthNum": 24,
                            // "accidentDisasterNum": 275
                            { name: "自然灾害类专家", value: 48 },
                            { name: "综合咨询类", value: 33 },
                            { name: "公共卫生社会安全类", value: 24 },
                            { name: "事故灾难类专家", value: 275 },
                        ];
                        drawSXChart(data);
                        // })
                        break;
                }
            } else if (currentTypeUrl.value == "xuexiao") {
                //上球
                get(`/api/aggregation/findXx`).then((res) => {
                    layerManager.addPrimitivesBillboards(
                        res,
                        `/data/images/icon/医院.png`,
                        "防护目标",
                        "leftClick",
                        clickHandleWith
                    );
                });
                //统计
                get(`/api/aggregation/countByCounty`).then((res) => {
                    drawSXChart(res);
                });
            } else {
                get(`${currentTypeUrl.value}${name}`).then((res) => {
                    drawSXChart(res.data);
                });
                get(
                    `${currentTypesUrl.value}${name}?pageSize=65534&startPage=1`
                ).then((res) => {
                    if (
                        currentTypeUrl.value == "/api/pandect/risk/earthquake/"
                    ) {
                        let arrA = res.data.contents[0].shape;
                        let arrB = arrA
                            .substring(9, arrA.length - 2)
                            .replace(/\s+/g, ",")
                            .split(",")
                            .map((item) => {
                                return parseFloat(item);
                            });
                        layerManager.addPloygonLine("dizhendai", arrB);
                        res.data.contents[0].lng = 110.198418;
                        res.data.contents[0].lat = 20.045805;
                        //clickHandle(item.data.contents[0])
                        layerManager.fly(
                            114.57823782971217,
                            6.623890048817367,
                            2798207,
                            6.237804420341853,
                            -1.0533895684285746,
                            0.00008672007331433917
                        );
                        let data5 = {
                            flowing: true,
                            flowImage: "./libs/ysCesium/images/colors1.png", //飞行线的图片
                            options: {
                                id: "dizhendaiqiang",
                                name: "this is YELLOW wall from surface",
                                wall: {
                                    positions:
                                        Cesium.Cartesian3.fromDegreesArrayHeights(
                                            [
                                                108.426949, 22.166395, 50000,
                                                109.203345, 22.528423, 50000,
                                                110.063293, 23.1332, 50000,
                                                112.845996, 25.1117690000001,
                                                50000, 116.825634,
                                                27.9436870000001, 50000,
                                                118.098646, 29.4951880000001,
                                                50000, 123.784132,
                                                29.7940869999999, 50000,
                                                121.359363, 25.749013, 50000,
                                                120.742332, 25.1439320000001,
                                                50000, 119.980562, 24.174429,
                                                50000, 119.0991, 23.04978,
                                                50000, 117.990467,
                                                22.2397130000001, 50000,
                                                116.840811, 21.0496210000001,
                                                50000, 115.232586,
                                                19.9863730000001, 50000,
                                                113.638058, 19.3897250000001,
                                                50000, 109.205235,
                                                16.4189800000001, 50000,
                                                108.5249, 15.95063, 50000,
                                                107.2719, 17.2173500000001,
                                                50000, 105.391918,
                                                20.3031360000001, 50000,
                                                108.426949, 22.166395, 50000,
                                            ]
                                        ),
                                    minimumHeights: [
                                        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                                        0, 0, 0, 0, 0, 0, 0,
                                    ], //墙距离地面的距离。
                                    material: Cesium.Color.YELLOW,
                                    interval: 3000, //混合颜色、(红绿混合透明后 就是黄色了)3000秒发射间隔,单纯材质无法展示飞行动态。所以去掉了。
                                    outline: false,
                                },
                            },
                        };
                        fmh.addWall(data5);
                    } else if (
                        currentTypeUrl.value == "/api/pandect/risk/earth/"
                    ) {
                        if (res.data.contents) {
                            layerManager.addPrimitivesBillboards(
                                res.data.contents,
                                `/data/images/icon/${name}.png`,
                                name,
                                "leftClick",
                                clickHandleWithTabs
                            );
                        }
                    } else {
                        if (res.data.contents) {
                            layerManager.addPrimitivesBillboards(
                                res.data.contents,
                                `/data/images/icon/${name}.png`,
                                name,
                                "leftClick",
                                clickHandleWith
                            );
                        }
                        //layerManager.addPoint(res.data.contents, "#ffff00" , name ,"leftClick",clickHandle);
                    }
                });
            }
        }
        let ziyuanList1 = ref([
            {
                name: "自然灾害类",
                value: "12345",
                color: "#FFF002",
                childShow: false,
                childItems: [
                    {
                        name: "地质灾害风险区统计报告",
                        href: "./data/doc/地质灾害风险区统计报告.docx",
                    },
                    {
                        name: "森林资源灾害风险区统计报告",
                        href: "./data/doc/森林资源灾害风险区统计报告.docx",
                    },
                ],
            },
            {
                name: "安全生产类",
                value: "12345",
                color: "#19F1F9",
                childShow: false,
                childItems: [
                    {
                        name: "运输安全危险源统计报告",
                        href: "./data/doc/运输安全危险源统计报告.docx",
                    },
                    {
                        name: "安全生产危险源统计报告",
                        href: "./data/doc/安全生产危险源统计报告.docx",
                    },
                ],
            },
            {
                name: "应急救援类",
                value: "12345",
                color: "#19F1F9",
                childShow: false,
                childItems: [
                    {
                        name: "应急物资统计报告",
                        href: "./data/doc/应急物资统计报告.docx",
                    },
                    {
                        name: "救援力量统计报告",
                        href: "./data/doc/救援力量统计报告.docx",
                    },
                ],
            },
        ]);
        let tabsLeftButtons = ref([
            {
                name: "自然灾害类",
                value: "0",
                isOpen: true,
                imgUrl: "/data/images/sjhj/自然灾害.png",
                icon: "el-icon-light-rain",
                child: [],
            },
            {
                name: "安全生产类",
                value: "0",
                isOpen: false,
                imgUrl: "/data/images/sjhj/安全生产.png",
                icon: "el-icon-office-building",
                child: [],
            },
            {
                name: "应急救援类",
                value: "0",
                isOpen: false,
                imgUrl: "/data/images/sjhj/应急救援.png",
                icon: "el-icon-truck",
                child: [],
            },
        ]);
        let isPsv = ref(false);
        const clickHandleWith = (id) => {
            if (document.getElementById("zaihaiInfo")) {
                css3Renderer.remove("zaihaiInfo");
            }
            if (window.handler3D) {
                window.handler3D.destroy();
            }
            let ids = id.item;
            let type = id.dataType;
            let idArr = Object.keys(ids);
            let idArr1 = idArr.filter((item) => {
                return typeof ids[item] !== "object";
            });
            let modelObj = {};
            for (let key in models) {
                if (key.toString().indexOf(type) > -1) {
                    modelObj = models[key].properties;
                }
            }
            let idArr2 = idArr1.filter((item) => {
                return modelObj.hasOwnProperty(item);
            });
            let arrTemp = [];
            for (let key in modelObj) {
                let res = idArr2.filter((ele) => ele === key)[0];
                res && arrTemp.push(res);
            }

            let htmlStr = `${arrTemp
                .map(function (item, index) {
                    return `
                    <div class="PoiInfoItem">
                        <p>${modelObj[item].description}:&nbsp;</p>
                        <div style="background:'rgba(19,62,76,0.5)', color:#fff">${ids[item]}</div>
                    </div>
                `;
                })
                .join("")}`;
            if (ids.lng) {
                css3Renderer.append({
                    id: "zaihaiInfo",
                    position: [ids.lng, ids.lat, 10],
                    element: `
                        <div class='ysc-dynamic-layer ys-css3-box' id='zaihaiInfo'>
                            <div class='line'></div>
                            <div class='mainTable'>
                                <div id="asdfg" class="tableTitle">${type}</div>
                                <div class="tableParent">
                                    <div class="PoiInfoBox">
                                        ${htmlStr}
                                    </div>
                                </div>
                            </div>
                        </div>
                    `,
                    offset: [10, -250],
                });
            } else {
                css3Renderer.append({
                    id: "zaihaiInfo",
                    position: [ids.lon, ids.lat, 10],
                    element: `
                        <div class='ysc-dynamic-layer ys-css3-box' id='zaihaiInfo'>
                            <div class='line'></div>
                            <div class='mainTable'>
                                <div id="asdfg" class="tableTitle">${type}
                                    <span>
                                        ${
                                            currentTypeUrl.value ==
                                            "/api/pandect/risk/earth/"
                                                ? "查看全景"
                                                : ""
                                        }
                                    </span>
                                </div>
                                <div class="tableParent">
                                    <div class="PoiInfoBox">
                                        ${htmlStr}
                                    </div>
                                </div>
                            </div>
                        </div>
                    `,
                    offset: [10, -250],
                });
            }

            if (currentTypeUrl.value == "/api/pandect/risk/earth/") {
                document
                    .getElementById("asdfg")
                    .addEventListener("click", () => {
                        store.commit(
                            "changePsvUrl",
                            `/qj/panoramagram/${ids.name}.jpg`
                        );
                        // if(ids.name){
                        //     isPsv.value = true
                        //     nextTick(()=>{
                        //         const psvViewer = new Viewer({
                        //             container: document.querySelector('#viewer'),
                        //             panorama: `/qj/panoramagram/${ids.name}.jpg`
                        //         });
                        //     })

                        // }
                    });
            }
        };
        const clickHandleWithTabs = (id) => {
            if (document.getElementById("zaihaiInfo")) {
                css3Renderer.remove("zaihaiInfo");
            }
            if (window.handler3D) {
                window.handler3D.destroy();
            }
            let ids = id.item;
            let type = id.dataType;
            let idArr = Object.keys(ids);
            let idArr1 = idArr.filter((item) => {
                return typeof ids[item] !== "object";
            });
            let modelObj = {};
            for (let key in models) {
                if (key.toString().indexOf(type) > -1) {
                    modelObj = models[key].properties;
                }
            }
            let idArr2 = idArr1.filter((item) => {
                return modelObj.hasOwnProperty(item);
            });
            let arrTemp = [];
            for (let key in modelObj) {
                let res = idArr2.filter((ele) => ele === key)[0];
                res && arrTemp.push(res);
            }

            let htmlStr = `${arrTemp
                .map(function (item, index) {
                    return `
                    <div class="PoiInfoItem">
                        <p>${modelObj[item].description}:&nbsp;</p>
                        <div style="background:'rgba(19,62,76,0.5)', color:#fff">${ids[item]}</div>
                    </div>
                `;
                })
                .join("")}`;
            if (ids.lng) {
                css3Renderer.append({
                    id: "zaihaiInfo",
                    position: [ids.lng, ids.lat, 10],
                    element: `
                        <div class='ysc-dynamic-layer ys-css3-box' id='zaihaiInfo'>
                            <div class='line'></div>
                            <div class='mainTable'>
                                <div id="asdfg" class="tableTitle">${type}</div>
                                <div class="tableParent">
                                    <div class="PoiInfoBox">
                                        ${htmlStr}
                                    </div>
                                </div>
                            </div>
                        </div>
                    `,
                    offset: [10, -250],
                });
            }

            if (currentTypeUrl.value == "/api/pandect/risk/earth/") {
                document
                    .getElementById("asdfg")
                    .addEventListener("click", () => {
                        store.commit(
                            "changePsvUrl",
                            `/qj/panoramagram/${ids.name}.jpg`
                        );
                    });
            }
        };
        const clickHandleWithNewPannel = (id) => {
            if (document.getElementById("zaihaiInfo")) {
                css3Renderer.remove("zaihaiInfo");
            }
            if (window.handler3D) {
                window.handler3D.destroy();
            }
            let ids = id.item;
            let type = id.dataType;
            let idArr = Object.keys(ids);
            let idArr1 = idArr.filter((item) => {
                return typeof ids[item] !== "object";
            });
            let modelObj = {};
            for (let key in models) {
                if (key.toString().indexOf(type) > -1) {
                    modelObj = models[key].properties;
                }
            }
            let idArr2 = idArr1.filter((item) => {
                return modelObj.hasOwnProperty(item);
            });
            let arrTemp = [];
            for (let key in modelObj) {
                let res = idArr2.filter((ele) => ele === key)[0];
                res && arrTemp.push(res);
            }

            // （0：重大，1：一级，2：二级，3：三级，4：其他）
            let obj = ["重大", "一级", "二级", "三级", "其他"];
            let htmlStr = `${arrTemp
                .map(function (item, index) {
                    return `
                    <div class="PoiInfoItem">
                        <p>${modelObj[item].description}:&nbsp;</p>
                        <div style="background:'rgba(19,62,76,0.5)', color:#fff">${
                            modelObj[item].description == "隐患分级"
                                ? obj[ids[item]]
                                : ids[item]
                        }</div>
                    </div>
                `;
                })
                .join("")}`;
            let imgStr = `${ids.detailsBefore
                .map(function (item, index) {
                    let url = item.url.replace(
                        "https://59.212.147.69:8889",
                        "/qj"
                    );
                    return `
                    <li><a href="#"><img style="width:500px;height:300px" src="${url}" alt=""></a></li>
                `;
                })
                .join("")}`;
            let aStr = `${ids.detailsBefore
                .map(function (item, index) {
                    return `
                    <a href="javascript:void(0)"></a>
                `;
                })
                .join("")}`;
            if (ids.lng) {
                css3Renderer.append({
                    id: "zaihaiInfo",
                    position: [ids.lng, ids.lat, 10],
                    element: `
                        <div class='ysc-dynamic-layer ys-css3-box' id='zaihaiInfo'>
                            <div class='line'></div>
                            <div class='mainTable1 mainTable'>
                                <div id="asdfg" class="tableTitle">${type}</div>
                                <div class="tableParent tableParent1">
                                    <div class="PoiInfoBox1">
                                        ${htmlStr}
                                    </div>
                                    <div id="banner1">
                                        <ul class="imgList1">
                                            ${imgStr}
                                        </ul>
                                            <a class="leftBtn1" href="javascript:void(0)">&lt;</a>
                                            <a class="rightBtn1" href="javascript:void(0)">&gt;</a>
                                        <div class="focusList1">
                                            ${aStr}
                                        </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    `,
                    offset: [10, -250],
                });
            }
            function changeImg(a) {
                //实参代表图片索引的一个数字
                $(".imgList1 li").eq(a).fadeIn().siblings().fadeOut(); //淡入显示，其它隐藏
                $(".focusList1 a")
                    .eq(a)
                    .addClass("cur")
                    .siblings()
                    .removeClass("cur"); //添加class，其它删除
            }
            //自动播放按顺序执行
            var step = 0; //用全局变量做一个声明 每隔2s做一个调用
            changeImg(step); //页面刚进入默认第一张显示
            var timer = null; //定义为全局定时器，其它的方法就可以访问到这个定时器
            function autoPlay() {
                //定义一个变量接收定时器
                timer = setInterval(function () {
                    step++;
                    if (step === 5) {
                        step = 0; //从第一张开始轮播
                    }
                    changeImg(step);
                }, 2000);
            }
            autoPlay();
            //点击左按钮切换
            $(".leftBtn ").click(function () {
                clearInterval(timer); //清除定时器
                step--; //每点击一下就减减
                if (step === -1) {
                    step = 4; //当减到最后一张时，让图片从最后一张开始
                }
                changeImg(step); //图片跟着变化
                autoPlay(); //当不点击按钮的时候，在继续执行定时器
            });
            //点击右按钮切换
            $(".rightBtn1").click(function () {
                clearInterval(timer); //清除定时器
                step++; //每点击一下就减减
                if (step === 5) {
                    step = 0; //当加到最后一张时，让图片从第一张开始
                }
                changeImg(step); //图片跟着变化
                autoPlay(); //当不点击按钮的时候，在继续执行定时器
            });
            //点击焦点切换
            $(".focusList1 a").click(function () {
                clearInterval(timer); //先清除定时器
                step = $(this).index(); //赋值给当前索引
                changeImg(step); //执行step图片
                autoPlay(); //不点击的时候在执行定时器
            });
            //鼠标移入图片区域暂停自动播放，鼠标移出继续播放
            $(".imgList1")
                .mouseover(function () {
                    //mouseiver鼠标移入

                    clearInterval(timer); //先清除定时器
                })
                .mouseout(function () {
                    //mouseiver鼠标移出
                    autoPlay(); //继续执行定时器
                });
        };
        let ziyuanList = ref([]);
        let isZyActive = ref(0);
        let erjiName = ref("");
        let sanjiName = ref("");
        //点击左侧二级目录显示
        const handleZiYuanClick = (item, index) => {
            isZyActive.value = index;
            let name = item.name;
            //设置柱状图标题
            erjiName.value = name;
            sanjiName.value = "";
            //drawSXChart([{name:'',value:0}])
            ziyuanList.value.forEach((item1, index1) => {
                if (index == index1) {
                    //item1.childShow = !item1.childShow
                    //改变柱状图
                    store.commit("changeSjzlCenterState", name);
                    layerManager.removeAll();
                    console.log(name);
                    switch (name) {
                        case "防护目标":
                            drawLBChart([{ name: "防护目标", value: 5528 }]);
                            break;
                        case "铁路环境安全隐患点":
                            get(`/api/pandect/safety/trafficrailway`).then(
                                (res) => {
                                    drawSXChart(res.data);
                                }
                            );
                            break;
                        // case "地质灾害风险区":
                        //     drawLBChart([{name:"防护目标",value:5528}])
                        //     break;
                        // case "森林资源灾害风险区":
                        //     drawLBChart([{name:"防护目标",value:5528}])
                        //     break;
                        // case "安全生产危险源":
                        //     drawLBChart([{name:"防护目标",value:5528}])
                        //     break;
                        // case "运输安全危险源":
                        //     drawLBChart([{name:"防护目标",value:5528}])
                        //     break;
                    }
                } else {
                    item1.childShow = false;
                }
            });
        };
        let childZyList = ref([]);
        let isTabActive = ref(0);
        const handleTabClick = (index) => {
            if (index < 3) {
                isTabActive.value = index;
                isZyActive.value = 0;
                //设置左侧二级菜单内容
                ziyuanList.value = tabsLeftButtons.value[index].child;
                //初始化第一个二级条目
                if (index == 0) {
                    //水旱灾害风险区
                    store.commit("changeSjzlCenterState", "水旱灾害风险区");
                    erjiName.value = "水旱灾害风险区";
                    sanjiName.value = "低洼地";
                    get("/api/pandect/risk/waterTypes").then((res) => {
                        drawLBChart(res.data);
                    });
                    //低洼地
                    get("/api/pandect/risk/water/低洼地").then((res) => {
                        drawSXChart(res.data);
                    });
                } else if (index == 1) {
                    erjiName.value = "安全生产危险源";
                    sanjiName.value = "危化品使用场所";
                    store.commit("changeSjzlCenterState", "安全生产危险源");
                    //安全生产危险源
                    get("/api/pandect/safety/produceTypes").then((res) => {
                        drawLBChart(res.data);
                    });
                    //危化品使用场所
                    get("/api/pandect/safety/produce/危化品使用场所").then(
                        (res) => {
                            drawSXChart(res.data);
                        }
                    );
                } else if (index == 2) {
                    //应急物资
                    store.commit("changeSjzlCenterState", "应急物资");
                    erjiName.value = "应急物资";
                    sanjiName.value = "物资仓库";
                    //应急物资 类别统计
                    drawLBChart([
                        { name: "物资储备点", value: 30 },
                        { name: "物资仓库", value: 277 },
                    ]);
                    // get(`/api/aggregation/findRbMaterialwarehouse?type=物资仓库&pageSize=65534&startPage=1`).then((res)=>{
                    //     //layerManager.addPrimitivesBillboards(res, `/data/images/icon/物资仓库.png` , "物资仓库" ,"leftClick", clickHandleWith)
                    // })
                    //市县统计
                    get(`/api/aggregation/countRbMaterialByArea/物资仓库`).then(
                        (res) => {
                            drawSXChart(res);
                        }
                    );
                }
            } else {
                ElMessage.warning({
                    message: "暂无数据",
                    type: "warning",
                });
            }
        };
        let loadingInstance = null;
        let exportWord = (href) => {
            loadingInstance = ElLoading.service({
                lock: true,
                text: "正在生成报告",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            setTimeout(() => {
                nextTick(() => {
                    loadingInstance.close();
                    window.open(href);
                });
            }, 1000);
        };
        let ths1 = ["资源", "部门"];
        let ths2 = ["资源", "部门"];
        const handleClick1 = (item, index) => {
            switch (index) {
                case 0:
                    let arr1 = detailArr1.value[0].jkkfwx.map((item) => {
                        return {
                            name: item.name,
                            total: item.zt,
                        };
                    });
                    store.commit("changeSjzlCenterContent", {
                        ths: ["接口名称", "接口状态"],
                        tds: arr1,
                        name: item.name,
                    });
                    break;
                case 1:
                    let arr2 = detailArr1.value[0].jkjhsjl.map((item) => {
                        return {
                            name: item.name,
                            total: item.jhzl,
                        };
                    });
                    store.commit("changeSjzlCenterContent", {
                        ths: ["接口名称", "交换总量"],
                        tds: arr2,
                        name: item.name,
                    });
                    break;
                case 2:
                    let arr3 = detailArr1.value[0].jkfwcs.map((item) => {
                        return {
                            name: item.name,
                            total: item.fwcs,
                        };
                    });
                    store.commit("changeSjzlCenterContent", {
                        ths: ["接口名称", "访问次数"],
                        tds: arr3,
                        name: item.name,
                    });
                    break;
                case 3:
                    let arr4 = detailArr1.value[0].jkfwyhs.map((item) => {
                        return {
                            name: item.name,
                            total: item.fwyhs,
                        };
                    });
                    store.commit("changeSjzlCenterContent", {
                        ths: ["接口名称", "访问用户数"],
                        tds: arr4,
                        name: item.name,
                    });
                    break;
            }
        };
        const handleClick2 = (index) => {
            switch (index) {
                case 0:
                    let arr1 = detailArr2.value[0].sjl.map((item) => {
                        return {
                            name: item.bm,
                            total: item.sl,
                        };
                    });
                    store.commit("changeSjzlCenterContent", {
                        ths: ["部门", "数量"],
                        tds: arr1,
                        name: "数据量",
                    });
                    break;
                case 1:
                    let arr2 = detailArr2.value[0].jks.map((item) => {
                        return {
                            name: item.name,
                            total: item.bm,
                        };
                    });
                    store.commit("changeSjzlCenterContent", {
                        ths: ["接口名称", "部门"],
                        tds: arr2,
                        name: "接口数",
                    });
                    break;
                case 2:
                    let arr3 = detailArr2.value[0].zys.map((item) => {
                        return {
                            name: item.name,
                            total: item.bm,
                        };
                    });
                    store.commit("changeSjzlCenterContent", {
                        ths: ["资源名称", "部门"],
                        tds: arr3,
                        name: "资源数",
                    });
                    break;
                case 3:
                    let arr4 = detailArr2.value[0].sjzykj.map((item) => {
                        return {
                            name: item.bm,
                            total: item.sl,
                        };
                    });
                    store.commit("changeSjzlCenterContent", {
                        ths: ["部门", "占用空间"],
                        tds: arr4,
                        name: "数据占用空间",
                    });
                    break;
                case 4:
                    let arr5 = detailArr2.value[0].kbs.map((item) => {
                        return {
                            name: item.name,
                            total: item.bm,
                        };
                    });
                    store.commit("changeSjzlCenterContent", {
                        ths: ["库表名称", "部门"],
                        tds: arr5,
                        name: "库表数",
                    });
                    break;
            }
        };
        const handleClick3 = (item, index) => {
            let arr = [];
            detailArr3.value.forEach((item, index) => {
                item.ejs.forEach((item1, index1) => {
                    item1.sjs.forEach((item2, index1) => {
                        arr.push({
                            name: item.yj,
                            total: item1.ej,
                            total1: item2,
                        });
                    });
                });
            });

            store.commit("changeSjzlCenterContent", {
                ths: ["一级分类", "二级分类", "三级分类"],
                tds: arr,
                name: "主题库",
            });
        };
        const handleClick4 = (item, index) => {
            let arr = [];

            detailArr4.value.forEach((item, index) => {
                item.ej.forEach((item1, index1) => {
                    arr.push({
                        name: item.yj,
                        total: item1,
                    });
                });
            });
            store.commit("changeSjzlCenterContent", {
                ths: ["一级分类", "二级分类"],
                tds: arr,
                name: "专题库",
            });
        };
        let models = ref(null);
        //let colorArr = ['#01BCE2',"#D79721","#A149DC","#04CD72"]
        let colorArr = ["#01BCE2", "#01BCE2", "#01BCE2", "#01BCE2"];
        onMounted(() => {
            //获取 自然灾害类 分类 及 数量
            get("/api/pandect/risk/countAll").then((res) => {
                tabsTitle.value[0].value = res.data.reduce(function (
                    sum,
                    number
                ) {
                    //sum2 前两个数的和
                    return sum + number.value;
                },
                0);
                tabsLeftButtons.value[0].child = res.data.filter((item) => {
                    return item.name.indexOf("地震") < 0;
                });
                tabsLeftButtons.value[0].value = res.data.reduce(function (
                    sum,
                    number
                ) {
                    //sum2 前两个数的和
                    return sum + number.value;
                },
                0);
                //增加报告
                tabsLeftButtons.value[0].child.forEach((item, index) => {
                    item.color = colorArr[index];
                    if (item.name == "地质灾害风险区") {
                        item.isExport = true;
                        item.exportHref =
                            "./data/doc/地质灾害风险区统计报告.docx";
                    } else if (item.name == "森林火灾风险区") {
                        item.isExport = true;
                        item.exportHref =
                            "./data/doc/森林资源灾害风险区统计报告.docx";
                    } else {
                        item.isExport = false;
                    }
                    //item.isActive = false;
                });
                //默认显示 水旱灾害风险区 四大类别
                ziyuanList.value = tabsLeftButtons.value[0].child;
                //默认显示所有水旱灾害类别
                get("/api/pandect/risk/waterTypes").then((res) => {
                    drawLBChart(res.data);
                });
                //默认显示低洼地水市县统计
                get("/api/pandect/risk/water/低洼地").then((res) => {
                    drawSXChart(res.data);
                });
                erjiName.value = "水旱灾害风险区";
                sanjiName.value = "低洼地";
                store.commit("changeSjzlCenterState", "水旱灾害风险区");
            });
            //获取 安全生产类 分类 及 数量
            get("/api/pandect/safety/countAll").then((res) => {
                tabsTitle.value[1].value = res.data.reduce(function (
                    sum,
                    number
                ) {
                    //sum2 前两个数的和
                    return sum + number.value;
                },
                0);
                tabsLeftButtons.value[1].child = res.data;
                tabsLeftButtons.value[1].value = res.data.reduce(function (
                    sum,
                    number
                ) {
                    //sum2 前两个数的和
                    return sum + number.value;
                },
                0);
                tabsLeftButtons.value[1].child.forEach((item) => {
                    item.isActive = false;
                });
                //增加报告
                tabsLeftButtons.value[1].child.forEach((item, index) => {
                    item.color = colorArr[index];
                    if (item.name == "运输安全危险源") {
                        item.isExport = true;
                        item.exportHref =
                            "./data/doc/运输安全危险源统计报告v1.0.docx";
                    } else if (item.name == "安全生产危险源") {
                        item.isExport = true;
                        item.exportHref =
                            "./data/doc/安全生产企业统计报告v1.0.docx";
                    } else {
                        item.isExport = false;
                    }
                    //item.isActive = false;
                });
            });
            //获取 应急救援类 分类 及 数量
            //按顺序分别是 1，应急物资。 2， 救援力量。 3， 学校
            Promise.all([
                get("/api/aggregation/countRbMaterial"),
                get("/api/aggregation/countRescueForce"),
                get("/api/aggregation/findXx"),
            ]).then((res) => {
                let value1 = Object.keys(res[0]).reduce(function (sum, number) {
                    //sum2 前两个数的和
                    return sum + res[0][number];
                }, 0);
                let value2 = Object.keys(res[1]).reduce(function (sum, number) {
                    //sum2 前两个数的和
                    return sum + res[1][number];
                }, 0);
                let value3 = res[2].length;
                tabsTitle.value[2].value = value1 + value2 + value3;
                let arr = [
                    { name: "应急物资", value: value1 },
                    { name: "救援力量", value: value2 },
                    { name: "学校", value: value3 },
                ];
                tabsLeftButtons.value[2].value = value1 + value2 + value3;
                tabsLeftButtons.value[2].child = [
                    { name: "应急物资", value: value1 },
                    { name: "救援力量", value: value2 },
                    { name: "防护目标", value: value3 },
                ];
                tabsLeftButtons.value[2].child.forEach((item, index) => {
                    item.color = colorArr[index];
                    //应急物资统计报告
                    //救援力量统计报告
                    if (item.name == "应急物资") {
                        item.isExport = true;
                        item.exportHref =
                            "./data/doc/应急物资统计报告v1.0.docx";
                    } else if (item.name == "救援力量") {
                        item.isExport = true;
                        item.exportHref =
                            "./data/doc/救援力量统计报告v1.0.docx";
                    } else {
                        item.isExport = false;
                    }
                    //item.isActive = false;
                });
            });
            axios.get("./data/api-docs.json").then((res) => {
                models = res.data.definitions;
            });
            layerManager.fly(
                109.84136858394542,
                19.309733363137966,
                964061,
                6.2771513174963225,
                -1.5702562228262291,
                0
            );
            //接口使用情况
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnJksyqk/list",
                    {}
                )
                .then((res) => {
                    let vdata = res.data.data[0];
                    useList.value = [
                        {
                            name: "接口可访问性",
                            value: vdata.jkkfwx,
                            color: "#19F1F9",
                        },
                        {
                            name: "接口交换数据量",
                            value: vdata.jkjhsjl,
                            color: "#19F1F9",
                        },
                        {
                            name: "接口访问次数",
                            value: vdata.jkfwcs,
                            color: "#19F1F9",
                        },
                        {
                            name: "接口访问用户数",
                            value: vdata.jkfwyhs,
                            color: "#19F1F9",
                        },
                    ];
                });
            //接口使用情况————明细
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnJksyqkMx/list",
                    {}
                )
                .then((res) => {
                    detailArr1.value = res.data.data;
                });
            //资源库明细
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnZykzyMxSpec/list",
                    {}
                )
                .then((res) => {
                    detailArr2.value = res.data.data;
                });
            //主题库明细
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnZhutkzyMx/list",
                    {}
                )
                .then((res) => {
                    detailArr3.value = res.data.data;
                });
            //专题库明细
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnZhuantkzyMx/list",
                    {}
                )
                .then((res) => {
                    detailArr4.value = res.data.data;
                });
            //资源库资源
            //axios.post("http://172.25.110.34:81/foundation/union/subject/scrnZykzy/list",{}).then((res)=>{
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnZykzySpec/list",
                    {}
                )
                .then((res) => {
                    let vdata = res.data.data[0];
                    ziyuanKu.value = [
                        {
                            name: "数据量",
                            value: vdata.sjl + "条",
                            color: "#FFF002",
                        },
                        {
                            name: "接口数",
                            value: vdata.jks + "个",
                            color: "#19F1F9",
                        },
                        {
                            name: "资源数",
                            value: vdata.zys + "个",
                            color: "#19F1F9",
                        },
                        {
                            name: "占用空间",
                            value: vdata.zykj,
                            color: "#19F1F9",
                        },
                        {
                            name: "库表数",
                            value: vdata.kbs + "个",
                            color: "#19F1F9",
                        },
                    ];
                });
            //主题库资源
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnZhutkzy/list",
                    {}
                )
                .then((res) => {
                    let vdata = res.data.data[0];
                    console.log(vdata);
                    themeBase.value = [
                        {
                            name: "一级分类数",
                            value: vdata.zys,
                            color: "#FFF002",
                        },
                        {
                            name: "二级分类数",
                            value: vdata.yjfls,
                            color: "#19F1F9",
                        },
                        {
                            name: "三级分类数",
                            value: vdata.ejfls,
                            color: "#19F1F9",
                        },
                    ];
                });
            //专题库资源
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnZhuantkzy/list",
                    {}
                )
                .then((res) => {
                    let vdata = res.data.data[0];
                    sThemeBase.value = [
                        { name: "资源数", value: vdata.zys, color: "#FFF002" },
                        {
                            name: "一级分类数",
                            value: vdata.yjfls,
                            color: "#19F1F9",
                        },
                        {
                            name: "二级分类数",
                            value: vdata.ejfls,
                            color: "#19F1F9",
                        },
                    ];
                });
        });
        return {
            useList,
            themeBase,
            sThemeBase,
            ziyuanList,
            handleZiYuanClick,
            childZyList,
            tabsTitle,
            isTabActive,
            handleTabClick,
            isZyActive,
            erjiName,
            sanjiName,
            rightRemoveAll,
            exportWord,
            handleClick1,
            handleClick2,
            handleClick3,
            handleClick4,
            ziyuanKu,
            detailArr1,
            detailArr2,
            detailArr3,
            detailArr4,
            isPsv,
            isZJ,
            zhuanjiaList,
            closeZJ,
        };
    },
};
</script>
<style scoped>
.tableContainer::-webkit-scrollbar {
    width: 5px;
    background-color: aqua;
}

/* 滚动槽 */
.tableContainer::-webkit-scrollbar-track {
    border-radius: 5px;
}

/* 滚动条滑块 */
.tableContainer::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: black;
}
</style>
<style lang="stylus" scoped>
@import './right.styl';
</style>